<template>
    <div class="atoname" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}">
            <div>
                <el-table
                    :border="tableConf.border"
                    :data="tableData"
                    :ref="tableConf.tableRef"
                    :height="!tableConf.height ? null : tableConf.height"
                    :min-height="tableConf.minHeight"
                    :max-height="tableConf.maxHeight"
                    :show-header="tableConf.showHeader"
                    :header-cell-style="tableHeaderColor"
                    :row-style="tableRowStyle"
                    :row-class-name="tableRowClassName"
                    :size="!tableConf.tableSize ? null : tableConf.tableSize"
                    @row-click="handeleRowData"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        v-if="tableConf.checkbox"
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column v-if="tableConf.tableShowExpand" type="expand" fixed>
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="tableExpand">
                                <el-row :gutter="20">
                                    <el-col
                                        v-for="(formitem,index) in tableShowConf"
                                        :key="index"
                                        :span="12">
                                        <el-form-item :label="formitem.label + ':'">
                                            <el-tooltip
                                                :enterable="false"
                                                :content="(props.row[formitem.attr_name] && props.row[formitem.attr_name] + '') || '--'" placement="top">
                                                <div class="table-inline">{{ props.row[formitem.attr_name] || '--' }}</div>
                                            </el-tooltip>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-for="(item,index) in tableShowConf"
                        :align="!tableConf.align ? null : tableConf.align"
                        :header-align="!tableConf.headerAlign ? null : tableConf.headerAlign"
                        :fixed="index == 0 ? true : false"
                        :key="item.attr_name"
                        :label="item.label"
                        :sortable="tableConf.sortable"
                        :prop="item.attr_name"
                        :width="!tableConf.tableWidth ? null : (typeof(tableConf.tableWidth) == 'number' ? tableConf.tableWidth : tableConf.tableWidth[index])">
                        <template slot-scope="scope">
                            <el-tooltip
                                placement="bottom-end"
                                :enterable="false"
                                :content="scope.row[item.attr_name]+''">
                                <div class="row-table-inline">{{ scope.row[item.attr_name] }}</div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :label="tableConf.operation"
                        :align="!tableConf.align ? null : tableConf.align"
                        :header-align="!tableConf.headerAlign ? null : tableConf.headerAlign"
                        v-if="tableConf.rowBtn"
                        :width="tableConf.tableOperationWidth">
                        <template slot-scope="scope">
                            <span
                                v-for="(rowBtnItem,index) in tableConf.rowBtn"
                                :key="index">
                                <el-button
                                    v-if="!rowBtnItem.dropdownData && rowBtnItem.eName"
                                    @click.stop="rowBtnClick(scope.row,rowBtnItem)" 
                                    :type="rowBtnItem.btnType" 
                                    :size="rowBtnItem.btnSize" 
                                    :round="rowBtnItem.btnRound" 
                                    :circle="rowBtnItem.btnCircle" 
                                    :loading="rowBtnItem.btnLoading" 
                                    :disabled="rowBtnItem.btnDisabled"
                                    :icon="rowBtnItem.iconLeft" 
                                    class="btnmargin">
                                    {{rowBtnItem.btnContent}}<i :class="rowBtnItem.iconRight"></i>
                                </el-button>
                                <span @click.stop="dropClick"  v-if="rowBtnItem.dropdownData">
                                    <el-dropdown trigger="click">
                                        <el-button 
                                            :type="rowBtnItem.btnType" 
                                            :size="rowBtnItem.btnSize" 
                                            :round="rowBtnItem.btnRound" 
                                            :circle="rowBtnItem.btnCircle" 
                                            :loading="rowBtnItem.btnLoading" 
                                            :disabled="rowBtnItem.btnDisabled">
                                            {{rowBtnItem.btnContent}}
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <span v-for="(item,index) in rowBtnItem.dropdownData" :key="index">
                                                <el-dropdown-item  @click.native="groupDropBtn(scope.row,item)">{{item.dropDownContent}}</el-dropdown-item>
                                            </span>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </span>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="panination" v-if="tableConf.paginationData">
                <el-pagination
                    @current-change="currentPageChange"
                    @size-change="sizeChange"
                    :background="tableConf.paginationData.pageBackground"
                    :prev-text="tableConf.paginationData.prevText"
                    :next-text="tableConf.paginationData.nextText"
                    :current-page.sync="tableConf.paginationData.currentPage"
                    :page-sizes="tableConf.paginationData.pagesizes"
                    :page-count="tableConf.paginationData.pagerCount"
                    :page-size="tableConf.paginationData.pagesize"
                    :layout="tableConf.paginationData.layout"
                    :total="tableConf.paginationData.total">
                </el-pagination>
            </div>
        </div>
</template>
<script>
export default {
    name: 'tablecmpt',
    props: {
        full: Boolean,
        datas:{
            type: Object,
            default() {
                return {
                    attr_data_conf: `[
                        {
                            "judgeType": "input",
                            "label": "身份证号",
                            "rules": [
                                {
                                    "required": true,
                                    "trigger": "blur",
                                    "message": "身份证号不能为空,请输入"
                                },
                                {
                                    "min": 18,
                                    "max": 18,
                                    "message": "身份证号的长度需要在18到18个字符之间",
                                    "trigger": "blur"
                                }
                            ],
                            "placeholder": "请输入身份证号",
                            "value": "",
                            "disabled": false,
                            "attr_name": "identity_number"
                        },
                        {
                            "judgeType": "input",
                            "label": "工作单位",
                            "rules": [
                                {
                                    "required": true,
                                    "trigger": "blur",
                                    "message": "工作单位不能为空,请输入"
                                },
                                {
                                    "min": 1,
                                    "max": 100,
                                    "message": "工作单位的长度需要在1到100个字符之间",
                                    "trigger": "blur"
                                }
                            ],
                            "placeholder": "请输入工作单位",
                            "value": "",
                            "disabled": false,
                            "attr_name": "employer"
                        },
                        {
                            "judgeType": "input",
                            "label": "职务",
                            "rules": [
                                {
                                    "min": 1,
                                    "max": 50,
                                    "message": "职务的长度需要在1到50个字符之间",
                                    "trigger": "blur"
                                }
                            ],
                            "placeholder": "请输入职务",
                            "value": "",
                            "disabled": false,
                            "attr_name": "position"
                        },
                        {
                            "judgeType": "input",
                            "label": "手机号",
                            "rules": [
                                {
                                    "required": true,
                                    "trigger": "blur",
                                    "message": "手机号不能为空,请输入"
                                },
                                {
                                    "min": 11,
                                    "max": 11,
                                    "message": "手机号的长度需要在11到11个字符之间",
                                    "trigger": "blur"
                                }
                            ],
                            "placeholder": "请输入手机号",
                            "value": "",
                            "disabled": false,
                            "attr_name": "phone_number"
                        },
                        {
                            "judgeType": "input",
                            "label": "座机号码",
                            "rules": [
                                {
                                    "min": 12,
                                    "max": 12,
                                    "message": "座机号码的长度需要在12到12个字符之间",
                                    "trigger": "blur"
                                }
                            ],
                            "placeholder": "请输入座机号码",
                            "value": "",
                            "disabled": false,
                            "attr_name": "landline_number"
                        },
                        {
                            "judgeType": "input",
                            "label": "传真号",
                            "rules": [
                                {
                                    "min": 12,
                                    "max": 12,
                                    "message": "传真号的长度需要在12到12个字符之间",
                                    "trigger": "blur"
                                }
                            ],
                            "placeholder": "请输入传真号",
                            "value": "",
                            "disabled": false,
                            "attr_name": "fax_number"
                        },
                        {
                            "judgeType": "input",
                            "label": "邮箱",
                            "rules": [
                                {
                                    "required": true,
                                    "trigger": "blur",
                                    "message": "邮箱不能为空,请输入"
                                },
                                {
                                    "min": 1,
                                    "max": 50,
                                    "message": "邮箱的长度需要在1到50个字符之间",
                                    "trigger": "blur"
                                }
                            ],
                            "placeholder": "请输入邮箱",
                            "value": "",
                            "disabled": false,
                            "attr_name": "email"
                        },
                        {
                            "judgeType": "input",
                            "label": "出生日期",
                            "rules": [],
                            "placeholder": "请输入出生日期",
                            "value": "",
                            "disabled": false,
                            "attr_name": "birth_date"
                        },
                        {
                            "judgeType": "input",
                            "label": "个性签名",
                            "rules": [
                                {
                                    "min": 1,
                                    "max": 50,
                                    "message": "个性签名的长度需要在1到50个字符之间",
                                    "trigger": "blur"
                                }
                            ],
                            "placeholder": "请输入个性签名",
                            "value": "",
                            "disabled": false,
                            "attr_name": "signature"
                        },
                        {
                            "judgeType": "select",
                            "label": "职级ID",
                            "rules": [],
                            "placeholder": "请选择职级ID",
                            "value": "",
                            "disabled": false,
                            "option": [],
                            "eName": "rankChange",
                            "attr_name": "rank_id"
                        }
                    ]`,
                    obj_conf:`{
                        table_data:[
                            {
                                "id": "5a4e25192b2b4e129e9cfa75489c3a9e",
                                "created_time": 1552659693,
                                "updated_time": 1552659693,
                                "identity_number": "123456789098765435",
                                "employer": "test",
                                "position": "position",
                                "phone_number": "13000000000",
                                "landline_number": null,
                                "fax_number": null,
                                "email": "111@163.com",
                                "birth_date": null,
                                "signature": "signal",
                                "rank_id": null,
                                "gender_id": null,
                                "education_id": null,
                                "political_status_id": null,
                                "full_name": "full"
                            },
                            {
                                "id": "5a4e25192b2b4e129e9cfa75489c3a9e",
                                "created_time": 1552659693,
                                "updated_time": 1552659693,
                                "identity_number": "123456789098765435",
                                "employer": "test",
                                "position": "position",
                                "phone_number": "13000000000",
                                "landline_number": null,
                                "fax_number": null,
                                "email": "111@163.com",
                                "birth_date": null,
                                "signature": "signal",
                                "rank_id": null,
                                "gender_id": null,
                                "education_id": null,
                                "political_status_id": null,
                                "full_name": "full"
                            },
                            {
                                "id": "5a4e25192b2b4e129e9cfa75489c3a9e",
                                "created_time": 1552659693,
                                "updated_time": 1552659693,
                                "identity_number": "123456789098765435",
                                "employer": "test",
                                "position": "position",
                                "phone_number": "13000000000",
                                "landline_number": null,
                                "fax_number": null,
                                "email": "111@163.com",
                                "birth_date": null,
                                "signature": "signal",
                                "rank_id": null,
                                "gender_id": null,
                                "education_id": null,
                                "political_status_id": null,
                                "full_name": "full"
                            },
                            {
                                "id": "5a4e25192b2b4e129e9cfa75489c3a9e",
                                "created_time": 1552659693,
                                "updated_time": 1552659693,
                                "identity_number": "123456789098765435",
                                "employer": "test",
                                "position": "position",
                                "phone_number": "13000000000",
                                "landline_number": null,
                                "fax_number": null,
                                "email": "111@163.com",
                                "birth_date": null,
                                "signature": "signal",
                                "rank_id": null,
                                "gender_id": null,
                                "education_id": null,
                                "political_status_id": null,
                                "full_name": "full"
                            }
                        ],
                        tableShowExpand: true, // 是否可展开
                        headerAlign: 'center', // 表头内容位置 center、left、right
                        align: 'center', // 表格内容位置 center、left、right
                        border:true, // 表格边框
                        checkbox:true, // 表格选择框
                        tableWidth: null, // 表格列宽度num
                        tableOperationWidth: null, // 表格操作列宽度num
                        tableRef:'tableRef',
                        operation:'配置',
                        minHeight: null, // 表格最小高度
                        maxHeight: null, // 表格最大高度
                        height: null,
                        sortable:true,
                        showHeader:true, // 显示隐藏表头
                        tableSize: 'medium',
                        validAuth: false,
                        rowBtn: [ // 行内操作
                            {
                                eName:'isPublish',
                                btnType:'text',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'更新',
                                iconLeft:'',
                                iconRight:''
                            },
                            {
                                eName:'isDelete',
                                btnType:'text',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'删除',
                                iconLeft:'',
                                iconRight:''
                            },
                            {
                                judgeType:'dropdownbtn',
                                btnType:'text',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'更多',
                                dropdownData:[
                                    {
                                        eName:'isDirector',
                                        dropDownContent:'指派给'
                                    },
                                    {
                                        eName:'isProcessConf',
                                        dropDownContent:'设置流程'
                                    }
                                ]
                            }
                        ],
                        paginationData:{
                            pageBackground:true,// background 是否为分页按钮添加背景色
                            currentPage:1,// curren-tPage 当前页数
                            pagerCount:10,// page-count 页码按钮的数量，当总页数超过该值时会折叠
                            pagesizes:[10,20,30,40,50],// page-sizes 每页显示个数选择器的选项设置
                            pagesize:4,// page-size 每页显示条目个数
                            prevText:"上一页", // prev-text next-text 替代图标显示的上/下一页文字
                            nextText:"下一页",
                            total:300,// total 总条目数
                            layout:"total,prev,pager,next,jumper"// layout 组件布局，子组件名用
                        }
                    }`,
                    intf:{
                        tableData:{
                            path: '',
                            method: ''
                        },
                        currentPage:{
                            path:'',
                            method:''
                        }
                    },
                    intf_eName_conf:[
                        {
                            name:'getTableData',
                            params:'获取表格数据'
                        }
                    ],
                    cross_parameter_name: 'mr',
                    event_ele_conf:`{
                        handleFun:function(data){ // 选中的行数据
                            // 多选去掉单选的行的颜色
                            this.radioRowIndex = null;
                            console.log(data);
                        },
                        isPublish:function(data){
                            this.radioRowIndex = null;
                            console.log('isPublish');
                        },
                        isDelete:function(data){
                            this.radioRowIndex = null;
                            console.log('isDelete');
                        },
                        isDirector:function(row,rowBtnItem){
                            this.radioRowIndex = null;
                            console.log('指派');
                        },
                        isProcessConf:function(row,item){
                            this.radioRowIndex = null;
                            console.log('设置流程');
                        },
                        // pageSize 改变时会触发
                        sizeChange:function(val){
                            this.tableConf.paginationData.pagesize = val;
                        },
                        // 获取选中行index,并且将选中行的下标存储在变量radioRowIndex中
                        handelRowFun:function(row){
                            this.radioRowIndex = row.index;
                        },
                        // 设置选中行颜色
                        rowStyleFun:function(obj){
                            // 判断选中的行号并且给选中行设置背景色等样式
                            // if(this.radioRowIndex === obj.rowIndex){
                            //      return 'background:#ddd;color:#f00;'
                            // }
                        },
                        // 把表格的行号放在表格的行数据中
                        RowClassNameFun:function(obj){
                            obj.row.index = obj.rowIndex;
                        },
                        // 设置表头颜色
                        headerStyleFun:function(obj){
                            // if(obj.rowIndex === 0){
                            //     return 'background:#ddd;color:#f00;'
                            // }
                        },
                        // 当前页码改变时触发 改变时会触发，上一页，下一页都会触发该事件
                        currentPageChange:function(val){
                            this.tableConf.paginationData.currentPage = val;
                            this.getTableData()
                        },
                        // 获取表格数据
                        getTableData:function(){
                            // let param = {
                            //     limit: this.tableConf.paginationData.pagesize,
                            //     page: this.tableConf.paginationData.currentPage
                            // };
                            // let url = '/' + this.datas.cross_parameter_name+'/' + this.datas.intf.getTableData.path;
                            // new this.Http(this.datas.intf.getTableData.method,url).request({param},function(data) {
                            //     this.tableData = data.data;
                            //     this.tableConf.paginationData.total = data.total;
                            // },error => {
                            //     console.log(error);
                            // })
                        },
                        mounted:function () {
                            // 初始化表格数据
                            this.getTableData();
                        }
                    }`,
                    cmpt_class:[],
                    cmpt_style:{}
                }
            }
        }
    },
    data () {
        return {
            tableData:[],
            tableShowConf:[],
            radioRowIndex: null
        }
    },
    created(){
        if(typeof(this.datas.attr_data_conf) == 'string'){
            try{
                this.tableShowConf = new Function(`return ${this.datas.attr_data_conf}`)();
            }catch(err){
                this.tableShowConf = JSON.parse(this.datas.attr_data_conf);
            }
        }else{
            this.tableShowConf = this.datas.attr_data_conf;
        }
        if(typeof(this.datas.obj_conf) == 'string'){
            try{
                this.tableConf = new Function(`return ${this.datas.obj_conf}`)();
            }catch(err){
                this.tableConf = JSON.parse(this.datas.obj_conf);
            }
        }else{
            this.tableConf = this.datas.obj_conf;
        }
        this.tableData = this.tableConf.table_data || [];
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        Object.keys(extraMethods).forEach(key => {
            if(key!=='mounted'){
                this[key] = extraMethods[key].bind(this);
            }
        });
    },
    mounted () {
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        if(extraMethods.mounted){//处理事件配置中的mounted
            extraMethods.mounted.bind(this)();
        }
        if(this.setCmptPermission && this.tableConf.validAuth)this.setCmptPermission();//权限设置
    },
    methods: {
        // 当选择项发生变化时会触发该事件
        handleSelectionChange(sel){
            if(this.handleFun)return this.handleFun(sel);
        },
        dropClick(){ // 阻止事件冒泡
            this.radioRowIndex = null;
        },
        rowBtnClick(row,rowBtnItem){
            if(this[rowBtnItem.eName])this[rowBtnItem.eName](row,rowBtnItem)
        },
        groupDropBtn(row,item){
            if(this[item.eName])this[item.eName](row,item)
        },
        handeleRowData(row, column, event){ // 单击选中的行数据
            if(this.handelRowFun)return this.handelRowFun(row)
        },
        tableHeaderColor(obj){ // 表头颜色设置
            if(this.headerStyleFun)return this.headerStyleFun(obj)
        },
        tableRowStyle(obj){ // 行颜色设置
            if(this.rowStyleFun)return this.rowStyleFun(obj)
        },
        tableRowClassName(obj){ // 把行号添加到行数据的属性中
            if(this.RowClassNameFun)return this.RowClassNameFun(obj)
        },
        setCmptPermission(){
            if(!this.datas.page_id){
                this.tableConf.rowBtn = [];
                console.log('page_id不存在');
                return false;
            }
            if(!this.datas.cmpt_page_id){
                this.tableConf.rowBtn = [];
                console.log('cmpt_page_id不存在');
                return false;
            }
            if(!JSON.parse(window.sessionStorage.getItem('sysPermission'))[this.datas.page_id]){
                this.tableConf.rowBtn = [];
                return false;
            }
            if(!JSON.parse(window.sessionStorage.getItem('sysPermission'))[this.datas.page_id][this.datas.cmpt_page_id]){
                this.tableConf.rowBtn = [];
                return false;
            }
            let cmptPermissionData = JSON.parse(window.sessionStorage.getItem('sysPermission'))[this.datas.page_id][this.datas.cmpt_page_id];
            let btnConfData = this.tableConf.rowBtn;
            if(!(btnConfData && btnConfData instanceof Array)){
                console.log('权限配置目标数据有误');
                return false;
            }
            for (let i = 0; i < btnConfData.length; i++) {
                if (btnConfData[i].dropdownData) {
                    for (let j = 0; j < btnConfData[i].dropdownData.length; j++) {
                        if (!cmptPermissionData.includes(btnConfData[i].dropdownData[j].eName)) {
                            btnConfData[i].dropdownData.splice(j, 1);
                            j--;
                        }
                    }
                } else if (!cmptPermissionData.includes(btnConfData[i].eName)) {
                    btnConfData.splice(i, 1);
                    i--;
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.tableExpand{
    .el-col{
        white-space: nowrap;
        .el-form-item__label{
            font-weight:bold;
            color:#409EFF;
            line-height: 30px;
        }
        .el-form-item{
            width:100%;
            margin-bottom:0;
            .el-form-item__content{
                width:100%;
                line-height:30px;
                height:30px;
                .el-form-item__label{
                    line-height:30px;
                }
                .table-inline{
                    width:200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
.row-table-inline{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.panination {
    margin:5px 0;
    display: flex;
    justify-content: flex-end;
}
</style>

